<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="块存储"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
    <!-- 挂载弹窗 -->
    <pdlog v-model="showEdit" width="1167px" title="挂载" @comfirm="showEdit = false" @cencel="showEdit = false">
      <div class="edit-dialog">
        <div class="name" style="width:150px">挂载到云服务器</div>
        <div style="width: 100%;">
          <div style="margin-bottom: 20px;">
            <el-select style="margin-right: 50px;width:233px;" size="small" v-model="vmServer" placeholder="请选择虚拟机或裸金属服务器">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input size="small" v-model="editValue" suffix-icon="el-icon-search" placeholder="请输入规格名称"></el-input>
          </div>
          <plist ref="pList" :tableData="newTableData2" :tableColumn="tableColumn2" :hasIndex="false" :hasRadioSelect="true"></plist>
        </div>
      </div>
    </pdlog>
    <!-- 创建快照弹窗 -->
    <pdlog v-model="addSnaposhot" width="976px" title="创建快照" @comfirm="addSnaposhot = false" @cencel="addSnaposhot = false">
      <div class="addSnaposhot">
        <div class="edit-dialog">
          <div class="name">块存储配置信息</div>
        </div>
        <div class="block-box">
          <div class="info-item" v-for="item in blockInfoList" :key="item.name">
            <div class="label">{{ item.label }}:</div><div class="value">{{ item.value }}</div>
          </div>
        </div>
        <div class="edit-dialog">
          <div class="name">快照名称</div>
          <div>
            <el-input class="w233" size="small" v-model="snaposhotName" placeholder="请输入"></el-input>
          </div>
        </div>
      </div>
    </pdlog>
    <!-- 快照记录弹窗 -->
    <pdlog v-model="showRecord" width="1003px" title="快照记录" @comfirm="showRecord = false" @cencel="showRecord = false">
      <plist ref="pList" :tableData="newTableData3" :tableColumn="tableColumn3" :hasIndex="false"></plist>
    </pdlog>
    <!-- 链接克隆弹窗 -->
    <pdlog v-model="showLink" width="418px" title="链接克隆" @comfirm="showLink = false" @cencel="showLink = false">
        <div class="addLink" @click="showLinkText=true">生成链接</div>
        <div style="min-height: 50px;margin-top: 10px;">
          <div v-show="showLinkText" class="link">http://13.1.1.2/fjdklasoiwek</div>
        </div>
    </pdlog>
    <!-- 远程复制弹窗 -->
    <pdlog v-model="showClone" title="远程复制" width="418px" @comfirm="showClone = false" @cencel="showClone = false">
      <div class="edit-dialog flex-c">
        <div class="name">链接地址</div>
        <el-input class="w233" size="small" v-model="linkValue" ></el-input>
      </div>
      <template #diafooter>
        <el-button @click="showClone=false" size="small" type="primary">复制至本地</el-button>
      </template>
    </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getStroageBlock} from '@/api/pageList'
  
  export default {
    data() {
      return {
        showClone:false,
        linkValue:'http://13.1.1.2/fjdklasoiwek',
        showLinkText:false,
        showLink:false,
        vmServer:'',
        tipName:'',
        showTip:false,
        blockInfoList:[
          {label:'磁盘名称',value:'pudssa.o3 | 160核 | 256GB'},
          {label:'磁盘ID',value:'pudssa.o3 | 160核 | 256GB'},
          {label:'磁盘类型',value:'1'},
          {label:'容量（GB）',value:'自动分配'},
          {label:'磁盘格式',value:'pudssa.o3 | 160核 | 256GB'},
          {label:'加密',value:'1'},
          {label:'区域',value:'自动分配'},
          {label:'可用区',value:'pudssa.o3 | 160核 | 256GB'},
        ],
        addSnaposhot:false,
        snaposhotName:'',
        showRecord:false,
        newTableData3:[{name:'physical.o3',name1:'physical.o3',name2:'physical.o3',name3:'physical.o3'}],
        tableColumn3:[
          {
            field: "name",
            label: "名称",
          },
          {
            field: "name1",
            label: "状态",
          },
          {
            field: "name2",
            label: "创建时间",
          },
          {
            field: "name3",
            label: "加密",
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            btnlist: [{
                name: '恢复',
                handle: ()=>{}
              },
            ]
          },
        ],
        newTableData2:[{name:'physical.o3',name1:'physical.o3',name2:'physical.o3',name3:'physical.o3',name4:'physical.o3',name5:'physical.o3'}],
        tableColumn2:[
          {
            field: "name",
            label: "名称",
          },
          {
            field: "name1",
            label: "选择挂载点",
          },
          {
            field: "name2",
            label: "状态",
          },
          {
            field: "name3",
            label: "私有IP地址",
          },
          {
            field: "name4",
            label: "弹性公网IP",
          },
          {
            field: "name5",
            label: "可用区",
          },
          
        ],
        addBtnList:[{
            id:1,
            name:'链接克隆',
            handle:()=>{this.showLinkText=false;this.showLink=true}
          },{
            id:2,
            name:'远程复制',
            handle:()=>{this.showClone=true}
          },{
            id:3,
            name:'创建块存储',
            handle:this.handleAdd
          }],
        btnList:[
          {
            id:1,
            name:'卸载',
            handle:()=>this.handleClick('卸载')
          },
          {
            id:2,
            name:'删除',
            handle:()=>this.handleClick('删除')
          },
        ],
        options: [],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "id",
            label: "ID",
          },
          {
            field: "ava_part",
            label: "可用区",
            sortable: true

          },
          {
            field: "disk_type",
            label: "磁盘类型",
            sortable: true
          },
          {
            field: "capa",
            label: "容量（GiB）",
            sortable: true
          },
          {
            field: "disk_attributes",
            label: "磁盘属性",
            sortable: true
          },
          {
            field: "mount_cloudserver",
            label: "挂载云服务器",
            sortable: true
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            btnlist: [{
                name: '挂载',
                handle: this.handleEdit
              },
              {
                name: '创建快照',
                handle: this.handleSnapshotAdd
              },
              {
                name: '快照记录',
                handle: this.handleRecord
              },
            ]
          },
        ],
        tableData: [],
      }
    },
    components: {
      listPage,
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        console.log('~~~~~~~~~',params)
        // 请求
        getStroageBlock().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })
      },
      handleAdd() {
        console.log('跳转新增页');
        this.$router.push({
          path: '/saveresource/blockSaveAdd'
        })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
      handleRecord(index, row) {
        console.log(index, row);
        this.showRecord = true
      },
      handleSnapshotAdd(index, row) {
        console.log(index, row);
        this.addSnaposhot = true
      },
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
    }
    .el-input {
      width: 233px;
    }
  }
  .block-box{
    width: 897px;
    box-sizing: border-box;
    display: flex;
    flex-flow: wrap row;
    margin: 20px;
    background-color: rgba(242, 242, 242, 1);
    padding: 10px 20px;
    .info-item{
      width: 33%;
      display: flex;
      align-items: center;
      margin: 10px 0;
      color: #000000D8;
      .label{
        min-width: 88px;
      }
      .value{}

    }
  }

.addLink{
  color: #2EB1FC;
    cursor: pointer;
}
.link{
  height: 50px;
  padding: 10px;
  font-size: 13px;
  margin: 0 30px;
  background-color: #282c34;
  color: #fff;
}
</style>
